<template>
  <el-submenu v-if="menu.children && menu.children.length > 0" :index="menu.id">
    <template slot="title">{{ menu.menuName }}</template>
        <side-menu v-for="item of menu.children" :key="item.id" :menu="item"/>
  </el-submenu>
  <el-menu-item v-else :index="menu.id" @click="handleMenuItemClick(menu.menuLink)">
    <template slot="title">{{ menu.menuName }}</template>
  </el-menu-item>
</template>

<script>
import SideMenu from './SideMenu'

export default {
  name: 'SideMenu',
  components: { SideMenu },
  props: {
    menu: {
      type: Object,
      required: true
    }
  },
  methods: {
    handleMenuItemClick (path) {
      this.$router.push(path)
    }
  }
}
</script>

<style scoped>

</style>
